<template>
  <div class="content" :style="customStyle">
    <div class="text-title" v-if="textTitle">
      {{ textTitle }}
      <a-tooltip placement="right" :title="titleDesc" v-if="titleDesc">
        <a-icon style="margin-left: 10px" type="question-circle" />
      </a-tooltip>
    </div>
    <slot></slot>
    <div class="rank-content" :id="id" :data="data" :color="color" :hollow="hollow" v-if="show"></div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String
    },
    titleDesc: {
      type: String
    },
    textTitle: {
      type: String
    },
    customStyle: {
      type: String
    },
    legendRight: {
      default: 0
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    hollow: {
      type: Boolean,
      default: false
    },
    color: {
      type: Array,
      default: () => {
        return ['#0DE8FB', '#0E6DE9', '#F4CD28', '#499A6F', '#A3D804', '#DE6B00']
        // return ['#0DE8FB', '#DE6B00', '#F4CD28']
      }
    },
    setKey: {
      type: Object
    },
    labelLine: {
      type: Boolean,
      default: false
    },
    itemGap: {
      type: Number,
      default: document.documentElement.clientHeight * 0.0426
    },
    legendType: {
      type: String
    },
    legendPadding: {
      type: Array,
      default: () => {
        return [25, 0]
      }
    },
    roseType: {
      type: String
    },
    customLegend: {
      type: Boolean,
      default: false
    },
    legendLabelSuffix: {
      type: Boolean,
      default: true
    },
    showOuter: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      id: '',
      show: true,
    }
  },
  created() {
    this.id = 'rankVerBar-' + Math.random()
  },
  mounted() {
    this.$nextTick(() => {
      this._initBar()
    })
  },
  updated() {
    this.$nextTick(() => {
      this._initBar()
    })
  },
  computed: {
    radius: function() {
      if (this.hollow && this.roseType != 'radius') {
        return ['40%', '80%']
      } else if (this.hollow && this.roseType == 'radius') {
        return ['15%', '55%']
      } else {
        return [0, '80%']
      }
    }
  },
  methods: {
    _customPercent(value) {
      let total = 0
      this.data.map(item => {
        total += item.count
      })
      let percent = (value / total) * 100
      percent = percent === parseInt(percent) ? percent : percent.toFixed(2)
      return percent
    },
    _initBar() {
      let itemGap = this.itemGap && this.legendType ? this.itemGap : document.documentElement.clientHeight * 0.0426

      let behaviours = []
      this.data[1].children.forEach((item, index) => {
        behaviours.push('type1' + index) //添加标注，用于对比渲染颜色
      })
      let innervalue = []
      let outervalue = []
      this.data.forEach((item1, index1) => {
        innervalue.push({
          name: item1.product,
          value: item1.count
        })
        if (item1.children && item1.children.length > 0) {
          item1.children.forEach((item2, index2) => {
            outervalue.push({
              name: item2.product,
              value: item2.count,
              type: 'type' + index1 + index2
            })
          })
        }
      })
      // console.log(innervalue)
      // console.log(outervalue)
      // 定义好坏颜色，注意：echart文字不支持渐变色，所以外环只能单色
      let goodCor = ['#6885F2', '#759BFF']
      let badCor = ['#33E3F2', '#26CED9']

      let echartData = {
        inner: innervalue,
        outer: outervalue
      }
      let option = {}
      option.color = [
        {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: goodCor[0] // 0% 处的颜色
            },
            {
              offset: 1,
              color: goodCor[1] // 100% 处的颜色
            }
          ]
        },
        {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: badCor[0] // 0% 处的颜色
            },
            {
              offset: 1,
              color: badCor[1] // 100% 处的颜色
            }
          ]
        }
      ]
      // option.color = ['#ff6900'];
      option.series = [
        {
          type: 'pie',
          radius: [0, '40%'],
          hoverAnimation: 1,
          hoverOffset: 1,
          selectedMode: 'single',
          selectedOffset: 3,
          itemStyle: {
            normal: {
              borderColor: '#fff'
            }
          },
          label: {
            normal: {
              position: 'inner',
              fontSize: 14,
              formatter: params => {
                return '{name|' + params.name + '}'
              },
              rich: {
                name: {
                  fontSize: 14,
                  padding: [0, 0, 3, 0],
                  color: '#fff',
                  textBorderWidth: 0
                }
              },
              padding: [0, -130, 25, -130]
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: echartData.inner
        },
        {
          type: 'pie',
          radius: ['40%', '70%'],
          hoverAnimation: 1,
          hoverOffset: 1,
          selectedMode: 'single',
          selectedOffset: 3,
          labelLine: {
            normal: {
              length: 20,
              length2: 0,
              smooth: 1
            }
          },
          itemStyle: {
            normal: {
              color: params => {
                // console.log('params')
                // console.log(params.data.type)
                //对比第二条数据的标注，渲染颜色
                if (behaviours.includes(params.data.type)) {
                  // return option.color[1]
                  return badCor[0]
                } else {
                  return goodCor[1]
                }
              },
              borderWidth: 0.5,
              borderColor: '#fff'
            }
          },
          label: {
            normal: {
              formatter: params => {
                // return '{name|' + params.name + '}\n{hr|}\n{percent|' + params.percent + '%}' + params.value
                // return '{name|' + params.name + '}' + params.value + '\n'+'{percent|' + params.percent + '%}'
                let arr = [
                  '{a|' + params.name + '  }{b| ' + params.value + '   }{c|' + params.percent + '% }'
                ]
                return arr
              },
              textStyle: {
                rich: {
                  a: {
                    fontSize: 13,
                    // fontSize: 300,
                    color: '#656565'
                  },
                  b: {
                    fontSize: 13,
                    color: '#6885F2'
                  },
                  c: {
                    fontSize: 13,
                    color: '#656565'
                  }
                }
              },
              distanceToLabelLine: 0,
              padding: [-2, 0, 0, 0]
              // rich: {
              //   name: {
              //     color: '#656565',
              //     fontSize: 13,
              //     padding: [6, 10],
              //     align: 'left'
              //   },
              //   percent: {
              //     color: '#656565',
              //     align: 'center',
              //     fontSize: 13,
              //     padding: [5, 10]
              //   },
              //   score: {},
              //   hr: {
              //     borderColor: '#C8C8C8',
              //     width: '100%',
              //     borderWidth: 0.5,
              //     height: 0
              //   }
              // }
            }
          },
          data: echartData.outer
        }
      ]
      let documentChart = document.getElementById(this.id);
      if (documentChart) {
        this.chart = this.$echarts.init(documentChart);
        this.chart.setOption(option);
      }
      window.addEventListener('resize', () => {
        itemGap = this.itemGap
        // this.chart.setOption(option, true)
        // this.show = false
        // this.show = true
        this.chart.resize()
        setTimeout(() => {}, 300)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.content {
  display: flex;
  flex-flow: column;
  position: relative;
  // background-color: #009896;
  .text-title {
    font-size: 18px;
    padding: 13px 15px;
    border-bottom: 1px solid #ddd;
  }
  .rank-content {
    flex: 1;
  }
  .legend {
    position: absolute;
    right: calc(100% - 10vh);
    padding: 0;
    display: flex;
    justify-content: space-between;
    width: 55%;
    flex-wrap: wrap;
    right: 0;
    top: 33%;
    > li {
      color: #fff;
      display: flex;
      white-space: nowrap;
      width: 50%;
      margin-bottom: 4.1666vh;
      font-size: 1.35vh;
      .legend-title {
        display: flex;
        align-items: center;
      }
      i {
        display: inline-block;
        border-radius: 2px;
        margin-right: 0.55vh;
      }
    }
  }
}
</style>
